<template>
  <div class="fullTitle">
    {{ title }}
    <a-icon class="titleIcon" :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'" @click="fullCoderEdit"></a-icon>
  </div>
</template>
<script>
export default {
  name: 'FullScreenTitle',
  props: {
    title: {
      type: String,
      default: false,
      required: true,
    },
    fullCoderEdit: {
      type: Function,
      default: false,
      required: true,
    },
    fullScreen: {
      type: Boolean,
      default: false,
      required: true,
    },
  },
  method: {},
}
</script>
<style scoped lang="less">
.fullTitle {
  position: relative;
  .titleIcon {
    color: rgba(0, 0, 0, 0.45);
    position: absolute;
    width: 56px;
    height: 56px;
    line-height: 56px;
    top: 50%;
    right: 40px;
    margin-top: -28px;
    transition: color 0.3s ease;
    &:hover {
      color: rgba(0, 0, 0, 0.75);
    }
  }
}
</style>
